<template>
	<!-- @click.native="toActivityDetail(item)" -->
	<view>
		<view class="card" @click.native="toActivityDetail(item)">
			<view class="image-box">
				<image class="bgImage" :src="item.imageSrc===null||item.imageSrc===''?bgImageSrc:item.imageSrc"></image>
			</view>
			<view class="detail-box">
				<view class="task-title">{{item.title}}</view>
				<view class="task-time">{{item.startTime}}</view>
				<view class="address-unserNum">
					<view class="task-address">{{item.address}}</view>
					<view class="task-userNum">{{item.joinNum}}人报名</view>
				</view>
				<view class="task-status" v-if="item.surplusTime>0">报名中</view>
				<view class="task-close" v-if="item.surplusTime<0">已结束</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-task",
		props: ['item'],

		data() {
			return {
				// bgImageSrc:`${this.$baseUrl}/image/download?name=bgMsg.jpg`,
				bgImageSrc: `${this.$baseUrl}/image/download?name=bgMsg.jpg`,
			};
		},
		methods: {
			async toActivityDetail(value) {
				// console.log(value)
				uni.navigateTo({
					url: '/pages/activityDetail/activityDetail?id=' + value.id,
				})
			},
		}
	}
</script>

<style lang="scss">
	.detail-box {
		margin-left: 24rpx;
		font-size: 30rpx;
	}

	.task-title {
		font-size: 28rpx;
	}

	.task-time {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);;
	}

	.address-unserNum {
		margin-top: 20rpx;
		display: flex;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;

		.task-userNum {
			margin-left: 30rpx;
		}
	}


	.task-status {
	
		position: absolute;
		top: 30rpx;
		right: 10rpx;
		font-size: 24rpx;
		padding: 4rpx;
		width: 96rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		border-radius: 8rpx;
		background-color: #5ADD9E;
		color: rgba(255, 255, 255, 1);
		

	}

	.task-close {
		position: absolute;
		top: 30rpx;
		right: 10rpx;
		font-size: 24rpx;
		padding: 4rpx;
		width: 96rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		border-radius: 8rpx;
		color: rgba(255, 255, 255, 1);
		background-color: #E80016;
		
	}

	.card {
		margin-top: 32rpx;
		position: relative;
		width: 686rpx;
		margin-left:32rpx;
		height: 180rpx;
		display: flex;
		border-bottom:  2rpx solid rgba(224, 224, 224, 1);      
	}

	.image-box {
		height: 140rpx;
		border: 1rpx solid #d6d6d6;
		width: 220rpx;
		margin-right: 15rpx;
	}

	.bgImage {
		height: 100%;
		width: 100%;
		border-radius: 10px;
	}

	.detail-box {
		float: right;
		// background-color: red;
		height: 200rpx;
		width: 70%;
	}
</style>
